<template>
  <div>
    <form @submit.prevent="generateTable">
      <div>
        <label for="rows">行数 (n):</label>
        <input type="number" id="rows" v-model.number="form.rows" min="1">
      </div>
      <div>
        <label for="cols">列数 (m):</label>
        <input type="number" id="cols" v-model.number="form.cols" min="1">
      </div>
      <div>
        <label for="borderWidth">边界宽度:</label>
        <input type="number" id="borderWidth" v-model.number="form.borderWidth" min="0">
      </div>
      <div>
        <label>是否显示行间隔色:</label>
        <label>
          <input type="radio" name="rowIntervalColor" value="yes" v-model="form.rowIntervalColor"> 是
        </label>
        <label>
          <input type="radio" name="rowIntervalColor" value="no" v-model="form.rowIntervalColor"> 否
        </label>
      </div>
      <div>
        <label>是否显示列间隔色:</label>
        <label>
          <input type="radio" name="colIntervalColor" value="yes" v-model="form.colIntervalColor"> 是
        </label>
        <label>
          <input type="radio" name="colIntervalColor" value="no" v-model="form.colIntervalColor"> 否
        </label>
      </div>
      <div>
        <label for="startRow">合并起始行 (a):</label>
        <input type="number" id="startRow" v-model.number="form.merge.startRow" min="1">
      </div>
      <div>
        <label for="startCol">合并起始列 (b):</label>
        <input type="number" id="startCol" v-model.number="form.merge.startCol" min="1">
      </div>
      <div>
        <label for="endRow">合并结束行 (c):</label>
        <input type="number" id="endRow" v-model.number="form.merge.endRow" min="1">
      </div>
      <div>
        <label for="endCol">合并结束列 (d):</label>
        <input type="number" id="endCol" v-model.number="form.merge.endCol" min="1">
      </div>
      <button type="submit">生成表格</button>
    </form>
    <table :style="{ border: form.borderWidth + 'px solid black' }">
      <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
        <td
            v-for="(cell, colIndex) in row"
            v-if="cell.visible"
            :key="colIndex"
            :colspan="cell.colspan"
            :rowspan="cell.rowspan"
            :style="{
            backgroundColor: getCellBackgroundColor(rowIndex, colIndex),
            border: form.borderWidth + 'px solid black'
          }"
        >
          {{ rowIndex + 1 }}-{{ colIndex + 1 }}
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        rows: 3,
        cols: 3,
        borderWidth: 1,
        rowIntervalColor: 'no',
        colIntervalColor: 'no',
        merge: {
          startRow: 1,
          startCol: 1,
          endRow: 1,
          endCol: 1
        }
      },
      tableData: []
    };
  },
  methods: {
    generateTable() {
      const {rows, cols, merge} = this.form;
      this.tableData = [];

      for (let rowIndex = 0; rowIndex < rows; rowIndex++) {
        const row = [];
        for (let colIndex = 0; colIndex < cols; colIndex++) {
          const visible = !(merge.startRow - 1 <= rowIndex && rowIndex < merge.endRow &&
              merge.startCol - 1 <= colIndex && colIndex < merge.endCol &&
              rowIndex !== merge.startRow - 1 && colIndex !== merge.startCol - 1);
          row.push({
            visible,
            colspan: 1,
            rowspan: 1
          });
        }
        this.tableData.push(row);
      }

      if (merge.startRow <= merge.endRow && merge.startCol <= merge.endCol) {
        const startRow = merge.startRow - 1;
        const startCol = merge.startCol - 1;
        const endRow = merge.endRow - 1;
        const endCol = merge.endCol - 1;

        this.tableData[startRow][startCol].colspan = endCol - startCol + 1;
        this.tableData[startRow][startCol].rowspan = endRow - startRow + 1;

        for (let r = startRow; r <= endRow; r++) {
          for (let c = startCol; c <= endCol; c++) {
            if (r !== startRow || c !== startCol) {
              this.tableData[r][c].visible = false;
            }
          }
        }
      }
    },

    getCellBackgroundColor(rowIndex, colIndex) {
      const {rowIntervalColor, colIntervalColor} = this.form;
      let backgroundColor = 'white';

      if (rowIntervalColor === 'yes') {
        backgroundColor = rowIndex % 2 === 0 ? 'gray' : 'yellow';
      }

      if (colIntervalColor === 'yes') {
        backgroundColor = colIndex % 2 === 0 ? 'gray' : 'yellow';
      }

      return backgroundColor;
    }
  }
};
</script>

<style>
table {
  border-collapse: collapse;
  width: 100%;
}

td {
  text-align: center;
  padding: 8px;
}
</style>
